﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Resize Tables</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Resize Tables"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n494","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="SpreadJS supports the table resizing feature just like in Excel." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="44663bbb-e3c0-46ee-9240-ff226046cf33"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="9d25871c-c47e-4700-a8b5-50b17e2a631f"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="4"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="tablegen.html">Tables</a>
 / Resize Tables</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Resize Tables<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>SpreadJS supports the table resizing feature just like in Excel.</p>

<p><strong>Table Resizing Indicator</strong> - The resizing indicator is displayed at the lower-right corner of the table provided the value of the showResizeHandle() method is set to true.</p>

<p><strong>Table Resizing Handler</strong> - The table resizing handler is&nbsp;displayed when users hover the mouse over the table resizing indicator.</p>

<p>While working with tables in spreadsheets, users can use&nbsp;the <a href="SpreadJS~GC.Spread.Sheets.Tables.Table~showResizeHandle.html">showResizeHandle()</a> method to get or set a value that indicates whether to display the resize handle for tables or not.</p>

<p>When the value of the&nbsp;<strong>showResizeHandle()</strong> method is set to true, the table displays a small resizing indicator at the lower-right corner of the table. Afterwards,&nbsp;users can simply drag the table using the table resizing handler to resize table to&nbsp;the desired&nbsp;size as depicted in the below image.</p>

<p><img style="MAX-WIDTH: 100%; HEIGHT: auto" border="0" alt="" src="images/spreadjsv13images/resize-table-gif.gif" />&nbsp;</p>

<h3 id="a">Resize Table to a Range</h3>

<p>Users can resize tables to a larger range as well as a smaller range depending upon their specific requirements.</p>

<ul>
    <li><strong>Larger Range</strong> - When the table is resized by moving the table resizing handler towards the right direction or bottom direction; the cells in the expanded area will copy the same style and new columns or rows&nbsp;will be added respectively&nbsp;with new names.</li>

    <li><strong>Smaller Range</strong> - When the table is resized by moving the table resizing handler towards the left direction or top direction; the&nbsp;data values of the table will remain intact but the style will be removed from the other columns&nbsp;or rows respectively.&nbsp;</li>
</ul>

<h3 id="b">Resize Table with Header Row and Total Row</h3>

<p>Users can also&nbsp;resize the tables that contain a header row and a total row.</p>

<p>When the table containing a header row and total row&nbsp;is resized by moving the table resizing handler towards the right direction, then the cells in the expanded area will copy the same style and new columns will be added with new names.&nbsp;</p>

<p>For bottom direction, the row count of the resized range contains header row and total row. For left direction, the data values in the table will be reserved but the style will be removed from other columns. For top direction, the row count will also be resized (as resized range row count + 1).</p>

<h3 id="c">Resize Table Containing Formulas</h3>

<p>When the table is resized, the selected range remains intact. After resizing the table containing styles and data, formulas will also&nbsp;remain intact and will&nbsp;apply&nbsp;automatically to the new range as well. The formula refferring to the table range will be updated after resizing the table.</p>

<p>The following points must be kept in mind while resizing tables in SpreadJS:</p>

<ul>
    <li>User can only resize in either the column direction or row direction at the same time.</li>

    <li>Minimum size of the table is the cell range containing one table row and one table column excluding the Header Row and total row.</li>

    <li>Maximum size of the table is the&nbsp;cell range containing table row count, table column count, sheet row count, and&nbsp;sheet column count.</li>

    <li>If there are values in the expanded area, those values will be automatically filled in the&nbsp;table.</li>

    <li>In Excel, if users are resizing a table that contains a total row; then all the values below the old table range in the expand range will fill in an excel spreadsheet. However, in SpreadJS, the total row will only cover the last row below the old range.</li>

    <li>The table resizing feature is also supported when the cells in&nbsp;your spreadsheets contain sparklines.</li>
</ul>

<div class="i-box i-box-note">
    <p><strong>Note:</strong> Tables can't be resized in the following scenarios:</p>

    <ul>
        <li>In table binding, the table resizing handler is disabled.</li>

        <li>When a table is resized&nbsp;over a span cell, the error "Cannot complete operation: A table cannot overlap with a table or merged cells" is thrown to indicate that the operation is invalid.</li>

        <li>When a table containing a total row&nbsp;is resized&nbsp;to bottom direction and filtered columns is resized, the error: "Cannot shift cells in a filtered range or table" is thrown.</li>

        <li>When a table is resized&nbsp;in the vertical direction and the table is filtered, the error: "Cannot resize a table that's adjacent to a hidden row or column" is thrown to indicate that the operation is invalid.</li>

        <li>When a table containing hidden rows and columns is resized&nbsp;in the vertical direction, the error "Cannot resize a table that's adjacent to a hidden row or column" is thrown to indicate that the operation is invalid.</li>

        <li>When resizing tables over another table, the error "Cannot complete operation: Operations that include cells both inside and outside a table range, and operation that affect cells that overlap multiple tables are not allowed" is thrown to indicate that the operation is invalid.</li>
    </ul>
</div>

<h3 id="d">Using Code</h3>

<p>The following&nbsp;example code&nbsp;shows how to enable the table resizing handler to resize tables while working with spreadsheets.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>// Initializing Spread<br />
                    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });</p>

                    <p><br />
                    // Get the activesheet<br />
                    var activeSheet = spread.getActiveSheet();</p>

                    <p>// Add Table<br />
                    var table = activeSheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);</p>

                    <p>// Enable Table Resize Handler by setting table's showResizeHandle method to true<br />
                    table.showResizeHandle(true);</p>

                    <p>activeSheet.getCell(1, 1).text("First Name");<br />
                    activeSheet.getCell(1, 2).text("Last Name");<br />
                    activeSheet.getCell(1, 3).text("Score");<br />
                    activeSheet.getCell(1, 4).text("Position");<br />
                    activeSheet.getCell(2, 1).text("Alexa");<br />
                    activeSheet.getCell(2, 2).text("Wilder");<br />
                    activeSheet.getCell(2, 3).text("90");<br />
                    activeSheet.getCell(2, 4).text("Web Developer");<br />
                    activeSheet.getCell(3, 1).text("Victor");<br />
                    activeSheet.getCell(3, 2).text("Wooten");<br />
                    activeSheet.getCell(3, 3).text("70");<br />
                    activeSheet.getCell(3, 4).text(".NET Developer");<br />
                    activeSheet.getCell(4, 1).text("Ifeoma");<br />
                    activeSheet.getCell(4, 2).text("Mays");<br />
                    activeSheet.getCell(4, 3).text("85");<br />
                    activeSheet.getCell(4, 4).text("Sales Manager");<br />
                    for (var i = 0; i &lt; 3; i++)<br />
                    activeSheet.setColumnWidth(i, 90.0, GC.Spread.Sheets.SheetArea.viewport);<br />
                    activeSheet.setColumnWidth(4, 120);</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
